<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body custom-class="import-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="项目类型" prop="projectType" key="projectType">
          <el-radio-group v-model="form.projectType" @change="form.estateId = null">
            <el-radio label="1">指定小区</el-radio>
            <el-radio label="2">公开通用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属小区" prop="estateId" key="estateId" v-if="form.projectType == '1'">
          <el-select v-model="form.estateId" placeholder="请选择楼盘" filterable clearable style="width: 100%;">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="item in estateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修项目" prop="maintenanceItemName" key="maintenanceItemName">
          <el-input v-model="form.maintenanceItemName" clearable placeholder="请输入维修项目名"></el-input>
        </el-form-item>
        <el-form-item label="材料费" prop="materialCostType" key="materialCostType">
          <el-radio-group v-model="form.materialCostType" @change="form.materialCost = null">
            <el-radio label="1">固定费用</el-radio>
            <el-radio label="2">由维修员根据实际情况填写</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="materialCost" key="materialCost" v-if="form.materialCostType == '1'">
          <el-input v-model="form.materialCost" type="number" clearable placeholder="请输入金额"
                    @change="(e)=>form.materialCost = Number(Number(e).toFixed(2))"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="劳务费" prop="laborCostType" key="laborCostType">
          <el-radio-group v-model="form.laborCostType" @change="form.laborCost = null">
            <el-radio label="1">固定费用</el-radio>
            <el-radio label="2">由维修员根据实际情况填写</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="laborCost" key="laborCost" v-if="form.laborCostType == '1'">
          <el-input v-model="form.laborCost" type="number" clearable placeholder="请输入金额"
                    @change="(e)=>form.laborCost = Number(Number(e).toFixed(2))"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { getEstateList, addMaintenanceItem, updateMaintenanceItem } from '@/api/houseManagement/maintenanceItem'

export default {
  components: {},
  props: {
    title: {
      default: '添加设备'
    },
    value: {
      default: false
    },
    data: {
      default: undefined
    }
  },
  data() {
    return {
      form: {},
      rules: {
        projectType: [
          { required: true, message: '请选择项目类型', trigger: 'blur' }
        ],
        maintenanceItemName: [
          { required: true, message: '请输入维修项目名', trigger: 'blur' }
        ],
        estateId: [
          { required: true, message: '请选择小区', trigger: 'blur' }
        ],
        materialCostType: [
          { required: true, message: '请选择材料费类型', trigger: 'blur' }
        ],
        materialCost: [
          { required: true, message: '请输入材料费', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value && value < 0) {
                callback(new Error('材料费不能为负数'))
              } else {
                callback()
              }
            }
          }
        ],
        laborCostType: [
          { required: true, message: '请选择劳务费类型', trigger: 'blur' }
        ],
        laborCost: [
          { required: true, message: '请输入劳务费', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value && value < 0) {
                callback(new Error('劳务费不能为负数'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      // 小区列表
      estateList: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
    },
    reset() {
      console.log('重置')
      this.form = {
        maintenanceItemId: '', //维修项目id
        maintenanceItemName: '', //维修项目名
        projectType: '1', //项目类型：1.指定小区；2.公开通用
        estateId: '', //楼盘id
        materialCostType: '1', //材料费类型：1.固定费用；2.由维修员根据实际情况填写
        materialCost: null, //材料费
        laborCostType: '1', //劳务费类型：1.固定费用；2.由维修员根据实际情况填写
        laborCost: null, //劳务费
        chargeItemType: '1' //收费项目类型：1.维修单；2.保洁单
      }
      // this.resetForm('form')
      this.getEstateList()
      if (this.data.maintenanceItemId) {
        this.form = this.data
      }
    },
    /** 获取小区列表 */
    getEstateList() {
      getEstateList().then(response => {
        this.estateList = response.data.map(item => {
          return {
            id: item.estateId,
            name: item.estateName
          }
        })
      })
    },
    /** 表单提交 */
    submitForm: debounce(function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.form.maintenanceItemId) {
            addMaintenanceItem(this.form).then(response => {
              if (response.code == 200) {
                this.$emit('success')
                this.$message.success(response.msg)
                this.visible = false
              } else {
                this.$message.error(response.msg)
              }
            })
          } else {
            updateMaintenanceItem(this.form).then(response => {
              if (response.code == 200) {
                this.$emit('success')
                this.$message.success(response.msg)
                this.visible = false
              } else {
                this.$message.error(response.msg)
              }
            })
          }
        }
      })
    }, 500, false),
    cancel() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog";
</style>
